<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在v-for中使用对象</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 使用v-for遍历对象的属性 -->
    <!-- 遍历对象时，会按照Object.keys()的结果遍历，但结果在不同的浏览器引擎下可能不一致 -->
    <div id="v-for-object">
        <ul>
            <li v-for="value in obj">
                {{ value }}
            </li>
        </ul>
        <!-- 提供第二个参数为property名称（键名） -->
        <ul>
            <li v-for="(value, name) in obj">
                {{ name }} : {{ value }}
            </li>
        </ul>
        <!-- 提供第三个参数为索引 -->
        <ul>
            <li v-for="(value, name, index) in obj">
                {{ index }} : {{ name }} : {{ value }}
            </li>
        </ul>
        <!-- 维护状态： vue更新使用v-for渲染的列表时，默认使用就地更新策略
            即数据项的顺序被改变，不会移动dom元素来匹配数据项的顺序（只适用于不依赖子组件状态/临时dom状态（表单输入）的列表渲染输出）
            为了便于跟踪每个节点，从而重用/重排序现有元素，需要为每项提供一个唯一key属性
            尽可能的在使用v-for时提供key属性（除非遍历的dom很简单，或是刻意依赖默认行为以提升性能）
            key属性的值应该使用字符串或数值类型 -->
        <ul>
            <li v-for="(value, name, index) in obj" :key="name">
                {{ index }} : {{ name }} : {{ value }}
            </li>
        </ul>
    </div>


    <script>
        var demo = new Vue({
            el: "#v-for-object",
            data: {
                obj: {
                    "姓名": "Aspirate Qiu",
                    "性别": "male",
                    "年龄": 23
                }
            }
        });
    </script>
</body>

</html>